<script setup lang="ts">
import { reactive } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();
type SubMenuItem = {
  name: string;
  path: string;
};

type MenuItem = {
  name: string; // 菜单名
  path: string; // 菜单跳转路径
  icon: string // 菜单图标
  isTop: Boolean  // 是否放在上面的菜单
  children?: Array<SubMenuItem> // 子菜单
};
// 行情菜单
const menuList: Array<MenuItem> = [{
  name: '',
  path: '/quotes',
  icon: 'menu_windows',
  isTop: true,
},
];

const data = reactive<{
  curName: string
}>({
  curName: '行情'
});

const onSelectMenu = (item: MenuItem) => {
  data.curName = item.name;
  router.push(item.path);
};
</script>

<template>
  <div class="side-menu">
    <div class="logo-bar">
      <div class="img-wrapper vertical-layout-center">
        <img src="@/assets/img/logo.png" alt="">
      </div>
    </div>
    <el-menu :default-active="data.curName" class="main-menu-list vertical-layout">
      <template v-for="(item, index) in menuList">
        <template v-if="item.isTop">
          <el-menu-item :key="index" :index=item.name @click="onSelectMenu(item)" :title="item.name">
            <svg-icon :icon="item.icon" color="none" />
          </el-menu-item>
        </template>
      </template>
      <span class="flex-1" />
      <template v-for="(item, index) in menuList">
        <el-menu-item v-if="!item.isTop" :key="index" :index=item.name @click="onSelectMenu(item)">
          <svg-icon :icon="item.icon" color="none" />
          <span class="name ellipsis">{{ item.name }}</span>
        </el-menu-item>
      </template>
    </el-menu>
  </div>
</template>

<style scoped lang="scss">
.side-menu {
  position: absolute;
  top: 0px;
  left: 0;
  bottom: 0;
  width: 60px;
  background-color: #3E4FA7;
  overflow: hidden;
  z-index: 10;
  -webkit-app-region: no-drag;
  .logo-bar {
    .img-wrapper {
      position: relative;
      left: 10px;
      top: 12px;
      background: rgba(248, 245, 245, 0.8);
      padding: 8px;
      border-radius: 50%;
      width: 40px;
      height: 40px;
    }
    img {
      position: relative;
      top: 3px;
      left: 3px;
      display: inline-block;
      vertical-align: middle;
      margin-top: -5px;
      width: 30px;
    }
  }
  .main-menu-list {
    position: absolute;
    left: 0;
    right: 0;
    top: 78px;
    bottom: 0;
  }
  .el-menu {
    background: transparent;
    border: none;
  }
  .el-menu-item {
    cursor: pointer;
    width: 100%;
    height: 49px;
    margin-bottom: 4px;
    color: white;
    &:hover {
      background-color: #677BE1;
    }
    .name {
      font-size: 14px;
      margin-left: 12px;
    }
    :deep(.dq-svg) {
      color: white;
    }
  }
  .is-active {
    background-color: #677BE1;
  }
}
</style>
